<template>
  <div class="xq">
    <div class="header">
      <div class="header_left" onclick="history.back();">
        <img src="../../public/img/返回.png" alt="" />
      </div>
      <div class="header_right">商品详情</div>
      <div>
        <router-link to="/shop">
          <span class="iconfont icon-gouwuche"></span>
        </router-link>
      </div>
    </div>
    <!-- 轮播 -->
    <div class="lb">
      <!-- 轮播 -->
      <swiper ref="mySwiper" class="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(val, index) in array1" :key="index">
          <img :src="val.image" alt="..." />
          <span id="ys">{{ val.id }}/3</span>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 商品名和简介 -->
    <div class="js">
      <span>{{ wine }}</span>
      <span>{{ text }}</span>
    </div>
    <!-- 详情 -->
    <div class="xxjs">
      <span>商品详解</span>
      <span>·&nbsp;·&nbsp;·</span>
    </div>
    <!-- 客户评价 -->
    <div class="xxjs">
      <span>宝贝评价</span>
      <span>·&nbsp;·&nbsp;·</span>
    </div>
    <!-- 底部 -->
    <div class="db">
      <div class="db_left">
        <ul>
          <li v-for="(val, index) in array2" :key="index">
            <a href="#">
              <span :class="[val.image1, val.image2]"></span>
              <span>{{ val.text }}</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="db_right">
        <div>
          <span @click="join">加入购物车</span>
          <span @click="buy">立即购买</span>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <div id="tangk" class="tangk" v-show="tangk">
      <div class="shang">
        <div>
          <img :src="image" alt="" />
        </div>
        <div>
          <p>{{ wine }}</p>
          <p>￥{{ price }}</p>
        </div>
      </div>
      <div class="capacity">
        <div>容量</div>
        <div>
          <ul>
            <li
              :class="{ li: val.a, lil: val.b }"
              v-for="(val, index) in array3"
              :key="index"
              @click="changed(index)"
            >
              <span class="">{{ val.ml }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 购买数量 -->
      <div class="sum">
        <div>购买数量(限购9件)</div>
        <div class="jiajian">
          <img src="../../public/img/sub.png" class="sub" @click="sub()" />
          <input type="number" name="" id="" class="" v-model="num" readonly />
          <img src="../../public/img/add.png" class="add" @click="add()" />
        </div>
      </div>
      <!-- 模态框确定 -->
      <div id="qd" @click="sure">确定购买</div>
    </div>
    <!-- 提示 -->
    <div class="ts" id="ts" v-bind:style="{ display: blockNone }">
      {{ msg }}
    </div>
    <!-- 遮幕 -->
    <div id="zm" class="zm" @click="zm" v-show="tangk"></div>
  </div>
</template>
<style  scoped>
/* 模态框上 */
.shang {
  width: 100%;
  display: flex;
  padding: 0px 0.16rem;
  position: relative;
}
.shang div:nth-child(1) {
  width: 25%;
}
.shang div:nth-child(1) img {
  display: inline-block;
  width: 100%;
  position: relative;
  left: 0;
  top: -0.746667rem;
}
.shang div:nth-child(2) {
  font-size: 0.373333rem;
  color: #544e4c;
  padding-left: 0.266667rem;
}
.shang div:nth-child(2) p:nth-child(1) {
  margin-bottom: 0;
}
.shang div:nth-child(2) p:nth-child(2) {
  color: #ff2e26;
}
/* 模态框中 */
.capacity {
  width: 100%;
  padding: 0 0.16rem;
}
.capacity div:nth-child(1) {
  width: 100%;
  height: 0.533333rem;
  line-height: 0.533333rem;
  font-size: 0.426667rem;
  color: #544e4c;
  margin-bottom: 0.533333rem;
}
.capacity div:nth-child(2) ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.capacity div:nth-child(2) ul li {
  padding: 0.106667rem;
  border-radius: 0.133333rem;
}
.li {
  background: #a5a5a5;
}
.lil {
  background: #ff2e26;
  color: #fff;
}
.capacity div:nth-child(2) ul li span {
  width: 100%;
  display: inline-block;
}
/* 模态框购买数量 */
.sum {
  width: 100%;
  display: flex;
  padding: 0 0.16rem;
  justify-content: space-between;
}
.jiajian input {
  width: 0.8rem;
  height: 0.533333rem;
  border: 0;
  text-align: center;
  font-size: 0.373333rem;
  background: #ffffff;
  outline: none;
}
.jiajian img {
  width: 0.693333rem;
}
/* 模态框确定 */
#qd {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 1.066667rem;
  background: #ff2e26;
  line-height: 1.066667rem;
  text-align: center;
  font-size: 0.373333rem;
  color: #fff;
}
/*  */
.xq {
  background: #f6f6f6;
}
.xq div {
  background: #fff;
}
.header {
  height: 1.066667rem;
  display: flex;
}
.carousel-item img {
  zoom: 0.5;
}
.header_left {
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header_left img {
  width: 0.533333rem;
  height: 0.533333rem;
}
.header_right {
  padding-right: 12%;
  margin: auto;
  color: #333333;
  font-size: 0.426667rem;
  font-weight: inherit;
}
.header div:nth-child(3) {
  margin-right: 3%;
}
.header div:nth-child(3) a span {
  font-size: 18px;
  line-height: 1.066667rem;
}
/* 轮播 */
.lb {
  width: 100%;
  position: relative;
}
.mySwiper img {
  width: 100%;
}
#ys {
  width: 0.266667rem;
  position: absolute;
  right: 0.56rem;
  bottom: 0;
  font-size: 0.373333rem;
  color: #fff;
  border-radius: 0.266667rem;
  padding: 0 0.213333rem;
}
/* 商品名和简介 */
.js {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.js span {
  margin: 0.133333rem;
}
.js span:nth-child(1) {
  color: black;
  font-size: 0.426667rem;
}
.js span:nth-child(2) {
  /* color: #ff2e26; */
  color: #544e4c;
  font-size: 0.373333rem;
  margin-bottom: 0.213333rem;
}
/* 商品详解 */
.xxjs {
  width: 100%;
  padding: 0.266667rem 0.133333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.4rem 0;
  /* background: red; */
}
.xxjs span {
  color: #544e4c;
  font-size: 0.373333rem;
}
/* 客户评价信息 */
.pj {
  width: 100%;
  padding: 0.133333rem;
}
.pj div:nth-child(1) {
  color: block;
  font-size: 0.373333rem;
}
.pj div:nth-child(2) h5 {
  font-size: 0.373333rem;
}
/* 底部 */
.db {
  width: 100%;
  height: 1.333333rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  box-sizing: border-box;
  display: flex;
}
.db_left {
  width: 40%;
  padding-left: 2%;
}
.db_left ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* padding-top: 0.053333rem; */
  list-style: none;
}
.db_left ul li a {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #544e4c;
}
.db_right {
  width: 60%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.db_right div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.333333rem;
  height: 1.066667rem;
  background: red;
  border-radius: 0.8rem;
  background-color: red; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to right, yellow, red);
}
.db_right div span {
  height: 100%;
  line-height: 1.066667rem;
  font-size: 0.426667rem;
  color: #fff;
}
.db_right div span:nth-child(1) {
  border-right: 1px solid #fff;
  padding-right: 0.266667rem;
}
.db_right div span:nth-child(2) {
  padding-left: 0.266667rem;
}
/* 购买数量提示 */
#ts {
  position: fixed;
  left: 50%;
  bottom: 2.133333rem;
  width: 3.733333rem;
  height: 0.8rem;
  transform: translate(-50%, -50%);
  border: 0.026667rem solid transparent;
  border-radius: 0.666667rem;
  text-align: center;
  line-height: 0.8rem;
  color: red;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.253);
  font-size: 0.373333rem;
  z-index: 12;
}
/* 模态框 */
.tangk {
  width: 100%;
  height: 61%;
  border: 0.026667rem solid rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  background-color: white;
  padding: 0 0;
  font-size: 0.426667rem;
}

/* 遮幕 */
body {
  position: relative;
}
.xq .zm {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 7;
}
</style>
<script>
import bus from "@/bus.js";
export default {
  name: "xq",
  data() {
    return {
      or: true,
      swiperOptions: {
        autoplay: true,
        loop: true, //循环播放
      },
      ml: "300ml",
      num: 1,
      msg: "", //购买提示信息
      blockNone: "none", //购买数量提示显示隐藏
      tangk: false, //模态框出现消失
      image: "",
      wine: "",
      text: "",
      price: 0,
      price1: 0,
      type: "",
      array1: [
        { image: "/img/xiangqye.jpg", class1: true, class2: true, id: 1 },
        { image: "/img/xiangqye1.jpg", class1: true, class2: false, id: 2 },
        { image: "/img/xiangqye2.jpg", class1: true, class2: false, id: 3 },
      ],
      array2: [
        { image1: "iconfont", image2: "icon-dianpu", text: "店铺" },
        { image1: "iconfont", image2: "icon-customer", text: "客服" },
        { image1: "iconfont", image2: "icon-shoucang", text: "收藏" },
      ],
      array3: [
        { ml: "300ml", m: 100, a: true, b: true },
        { ml: "500ml", m: 200, a: true, b: false },
        { ml: "600ml", m: 300, a: true, b: false },
        { ml: "1000ml", m: 400, a: true, b: false },
        { ml: "1200ml", m: 450, a: true, b: false },
      ],
    };
  },
  components: {},
  methods: {
    //点击购物车  出现模态框
    join() {
      this.tangk = true;
      this.or = true;
    },
    //立即购买
    buy() {
      this.tangk = true;
      this.or = false;
    },
    //选择不同容量
    changed(index) {
      this.array3.forEach((element) => {
        element.b = false;
      });
      this.array3[index].b = true;
      this.ml = this.array3[index].ml;
      this.price = this.price1 + this.array3[index].m;
    },

    //确定购买
    sure() {
      /* 传数据到store */
      var obj = {
        image: this.image, //图片
        wine: this.wine, //酒名
        text: this.text, //介绍
        ml: this.ml, //容量
        num: this.num,
        price: this.price, //单价
        flag: false,
      };
      //console.log(obj)

      /* //将所选物品传入全局
      this.$store.commit('add',obj);
      //拿取全局里的物品
      const arr=this.$store.state.object
      //将选中的所有商品本地缓存
      localStorage.setItem("shop",JSON.stringify(arr)) */
      if (localStorage.getItem("user")) {
        if (this.or) {
          //如果this.or为true说明点的是加入购物车

          var arr = JSON.parse(localStorage.getItem("shop"));
          if (arr == null || arr == 0) {
            //如果没有已有用户信息，则直接添加一个用户信息
            arr.push(obj);
            localStorage.setItem("shop", JSON.stringify(arr));
          } else {
            for (var i = 0; i < arr.length; i++) {
              if (
                arr[i].image == obj.image &&
                arr[i].wine == obj.wine &&
                arr[i].ml == obj.ml
              ) {
                arr[i].num++;
                localStorage.setItem("shop", JSON.stringify(arr));
                break;
              } else {
                if (i == arr.length - 1) {
                  arr.push(obj);
                  localStorage.setItem("shop", JSON.stringify(arr));
                  i++;
                }
              }
            }
          }
        } else {
          //如果this.or为false则表示点击立即购买
          //将所选物品传入全局
          this.$store.commit("add", obj);
          //拿取全局里的物品
          //const arr = this.$store.state.object;
          this.$router.replace({ path: "/settle" }); //进入立即购买的结算页面
        }
      } else {  //未登录
        this.msg = "需登录才能选购";
        this.blockNone = "block";
        setTimeout(() => {
          this.blockNone = "none";
          this.msg = "";
        }, 1000);
        console.log("请登录");
      }
      this.tangk = false; //隐藏模态框
    },
    /* 点击遮幕隐藏模态框 */
    zm() {
      this.tangk = false;
    },
    /* 减 */
    sub() {
      if (this.num > 1) {
        this.num--; //数量减1
      } else {
        this.msg = "亲,不能再减少了!";
        this.blockNone = "block";
        setTimeout(() => {
          this.blockNone = "none";
        }, 1000);
      }
    },
    /* 加 */
    add() {
      if (this.num < 9) {
        this.num++; //数量加1
      } else {
        this.msg = "亲,购买数量上限了!";
        this.blockNone = "block";
        setTimeout(() => {
          this.blockNone = "none";
        }, 1000);
      }
    },
  },
  mounted() {
    bus.$off("xx"); //在父组件接收的时候，先把事件注销：Bus.$off("saveTheme")，然后再接收
    bus.$on("xx", (data) => {
      console.log(data);
      this.image = data.image;
      this.wine = data.wine;
      this.text = data.text;
      this.price = data.price;
      this.price1 = data.price;
    });
  },
};
</script>